<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>添加用户</title>
</head>
<body align="center">
<style>
    body{
        background: url("/images/背景2.jpg") no-repeat;
        background-size: cover;
    }

    td,th{
        text-align: center;
        display: block;
        border-bottom: black solid 1px;
    }
    input{
        text-align: center;
    }
    select{
        width: auto;
        padding: 0  35%;
        margin: 0;
        color: gray;
    }
    option{

        text-align: center;
    }
    .button {
        display: inline-block;
        border-radius: 4px;
        background-color: #f4511e;
        border: none;
        color: #FFFFFF;
        text-align: center;
        font-size: 15px;
        padding: 6px;
        /*width: 100%;*/
        transition: all 0.5s;
        cursor: pointer;
        margin: 5px;

    }
    .button span {
        cursor: pointer;
        display: inline-block;
        position: relative;
        transition: 0.5s;
    }

    .button span:after {
        content: '»';
        position: absolute;
        opacity: 0;
        top: 0;
        right: -20px;
        transition: 0.5s;
    }

    .button:hover span {
        padding-right: 10px;
    }

    .button:hover span:after {
        opacity: 1;
        right: 0;
    }
    .button1{

        background-color: crimson;
    }
    .button2{

        background-color: chartreuse;
    }
</style>

<form th:action="@{addUser}" method="post">
    <table border="1" align="center" >
        <tr>
            <td><input  name="userid" hidden id="userid" placeholder="输入id" value="1" type="text"/></td>
            <td><input  name="username" id="username" placeholder="输入姓名"  type="text"/></td>
            <td><input   id="password"  name="password" placeholder="输入密码" type="text"/></td>
            <td><select   id="usersex"  name="usersex" size="1">
                <option value="1">性别</option>
                <option value="0">女</option>
                <option value="1">男</option>
            </select>
            </td>
            <td><input id="role" name="role" placeholder="用户权限" type="text"/></td>
            <td><input id="userphone" name="userphone" placeholder="输入号码" type="text"/></td>
            <td><input id="useraddress" name="useraddress" placeholder="输入住址" type="text"/></td>
            <td><input id="blacklist" name="blacklist" placeholder="黑名单" type="text"/></td>
            <td><input id="email" name="email" placeholder="输入邮箱" type="text"/></td>
    </table>

    <button type="submit" onclick="return nonull()" class="button"><span>保存</span></button>

</form>
<form th:action="@{viewUser}" method="get">
    <button class="button" style="cursor: pointer"/><span>返回</span></button>
</form>
</body>
<script type="text/javascript">
    function nonull() {

        var nullo =document.getElementById("userid").value;
        var null1 =document.getElementById("username").value;
        var null2=document.getElementById("password").value;
        var null3 =document.getElementById("role").value;
        var null4 =document.getElementById("usersex").value;
        var null5 =document.getElementById("userphone").value;
        var null6=document.getElementById("useraddress").value;
        var null7=document.getElementById("blacklist").value;
        var null8 =document.getElementById("email").value;
        if (nullo==""){
            alert("id不能為空");
            document.getElementById("userid").focus();
            return false;
        }

        if (null1==""){
            alert("用戶名不能為空");
            document.getElementById("username").focus();
            return false;
        }
        if (null2==""){
            alert("密码不能为空");
            document.getElementById("password").focus();
            return false;
        }
        if (null3==""){
            alert("请输入管理员级别");
            document.getElementById("role").focus();
            return false;
        }
        if (null4==""){
            alert("选择性别");
            document.getElementById("usersex").focus();
            return false;
        }
        if (null5==""){
            alert("请输入手机号码");
            document.getElementById("userphone").focus();
            return false;
        }
        if (null6==""){
            alert("请输入住址");
            document.getElementById("useraddress").focus();
            return false;
        }
        if (null7==""){
            alert("请输入用户是否为黑名单");
            document.getElementById("blacklist").focus();
            return false;
        }
        if (null8==""){
            alert("用戶邮箱不能为空");
            document.getElementById("email").focus();
            return false;
        };

    }
</script>
</html>